import React,{useEffect} from 'react'
import { Form, Input, Button, Radio, Space, NoticeBar } from 'react-vant'
import  {login_my,reg_my} from "../api/index"
import {useNavigate} from  "react-router-dom"
import {useDispatch,useSelector} from "react-redux"
type Props = {}
// interface values{
//   [x:string]:string
// }
const Login = (props: Props) => {
  const [form] = Form.useForm()
  const navigate=useNavigate()
  const dispatch:any=useDispatch()
  const code=useSelector((state:any)=>state.reducer.code)

 
  useEffect(()=>{
    console.log("code值改变了");
   
    if (code === 200) {
      console.log(code);
      navigate("/")
    }else if(code === 500){
    console.log(code);
    
    }
   
},[code])
  const onFinish = (values:any) => {
    console.log(values)
    if(values.type==="login"){
    dispatch(login_my(values))
    }else if(values.type==="reg"){
      dispatch(reg_my(values))
    }
  }
  return (
    <div>
       <Form
      form={form}
      initialValues={{
        type: 'login',
     
      }}
      onFinish={onFinish}
      footer={
        <>
          <Form.Subscribe to={['type', 'account']}>
            {({ type, account }) => (
              <NoticeBar>
                你将使用 {type === 'login' ? '登录' : '注册'}
              </NoticeBar>
            )}
          </Form.Subscribe>
          <div style={{ margin: '16px 16px 0' }}>
            <Button round nativeType='submit' type='primary' block>
              提交
            </Button>
          </div>
        </>
      }
    >
      <Form.Item name='type' label='登录方式'>
        <Radio.Group>
          <Space>
            <Radio name='login'>登录</Radio>
            <Radio name='reg'>注册</Radio>
          </Space>
        </Radio.Group>
      </Form.Item>

      <Form.Subscribe to={['type']}>
        {({ type }) => {
          return (
            <>
            {type === 'login' && (
             <>
                <Form.Item name='username' label='用户名'>
                  <Input placeholder='请输入用户名' />
                </Form.Item>
                 <Form.Item name='password' label='密码'>
                 <Input placeholder='请输入密码' />
               </Form.Item>
              </>
              )}
              {type === 'reg' && (
                <>
                 <Form.Item name='username' label='用户名'>
                  <Input placeholder='请输入用户名' />
                </Form.Item>
                 <Form.Item name='password' label='密码'>
                 <Input placeholder='请输入密码' />
               </Form.Item>
               </>
              )}
            </>
            
          )
        }}
      </Form.Subscribe>
    </Form>
    </div>
  )
}

export default Login